// sidebarl
$menuText:#333333;
$menuActiveText:#fff;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951

$menuBg:#fff;
$menuHover:#435EBE;
$menuActive:#435EBE;

$menuChildActiveBg:rgba(67, 94, 190, 0.1);
$menuChildActive:#435EBE;

$subMenuBg:#333333;
$subMenuHover:#333333;

$sideBarWidth: 220px;

$mainContainerBg: #F4F7FC;
$Color: var(--color);
$Color2: var(--color2);
$primaryColor: #435ebe;
$hoverColor: #697ECB;
$SecondColor: #EE3821;
$placeholder6: #666666;
$placeholder9: #999999;
$textColor2: #222222;
$textColor: #333333;
$borderColor: #DFE2E8;
$tableHeadColor: #E8EBF7;
$yellow:#F9DEAE;
$blueBg: linear-gradient(270deg, var(--color), var(--color2));

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  primaryColor: $primaryColor;
  Color: $Color;
  Color2: $Color2;
  blueBg: $blueBg;
  hoverColor: $hoverColor;
  SecondColor: $SecondColor;
  placeholder6: $placeholder6;
  placeholder9: $placeholder9;
  textColor2: $textColor2;
  textColor: $textColor;
  borderColor: $borderColor;
  tableHeadColor: $tableHeadColor;
  yellow: $yellow;

  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
  mainContainerBg: $mainContainerBg;
  menuChildActive: $menuChildActive;
  menuChildActiveBg: $menuChildActiveBg;
}
